﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>项目管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input placeholder="姓名" v-model="searchForm.dispatchName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker
                            v-model="searchForm.date"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="statistic" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-row>
                <el-button @click="handleAdd">创建</el-button>
            </el-row>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="dispatchName"
                        width="100"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="dispatchAccount"
                        width="100"
                        label="工号">
                </el-table-column>

                <el-table-column
                        prop="total"
                        width="180"
                        label="任务总数">
                </el-table-column>
                <el-table-column
                        prop="doing"
                        width="180"
                        label="进行中">
                </el-table-column>
                <el-table-column
                        prop="finish"
                        width="180"
                        label="已完成">
                </el-table-column>
                <el-table-column
                        prop="outTimeFinish"
                        width="180"
                        label="超时完成">
                </el-table-column>
                <el-table-column
                        prop="outTimeNotFinish"
                        width="180"
                        label="超时未完成">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
    <el-dialog
            title="创建任务"
            :visible.sync="watchDialog"
            width="60%">
        <el-form
                label-position="left"
                label-width="8em"

        >
            <el-form-item label="任务名称">
                <el-input v-model="work.title"></el-input>
            </el-form-item>
            <el-form-item label="任务简介">
                <el-input v-model="work.comment"></el-input>
            </el-form-item>
            <el-form-item label="要求完成时间">
                <el-date-picker
                        v-model="work.ensureTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="责任部门">
                <el-select v-model="dutyOrg" multiple filterable style="width: 100%">
                    <el-option
                            v-for="item in orgList"
                            :key="item.id"
                            :label="item.organizationName"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="责任人">
                <el-select v-model="workOrderWatchStr" multiple
                           remote
                           filterable
                           style="width: 100%">
                    <el-option
                            v-for="item in userOption"
                            :key="item.account"
                            :label="item.info"
                            :value="item.account"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关注人">
                <el-select v-model="workOrderDispatchStr" multiple
                           remote
                           filterable
                           style="width: 100%">
                    <el-option
                            v-for="item in userOption"
                            :key="item.account"
                            :label="item.info"
                            :value="item.account"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSave">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            let a = getDateTimeStr(0, 0, -30).split(" ")[0]
            let b = getDateTimeStr().split(" ")[0];
            return {
                orgList: [],
                tableData: [],
                userOption: [],
                dutyOrg: '',
                workOrderWatchStr: '',
                workOrderDispatchStr: '',
                watchDialog: false,
                work: {
                    title: '',
                    comment: '',
                    ensureTime: '',
                    workOrderDispatchStr: '',
                    workOrderWatchStr: '',
                    orgStr: '',
                },
                searchForm: {
                    dispatchName: '',
                    date: [a, b],
                }
            }
        },

        methods: {
            handleSave() {
                let dutyList = [];
                that.dutyOrg.map(item => {
                    let temp = that.orgList.find(x => x.id === item);
                    dutyList.push(temp)
                });
                let dispatchList = [];
                that.workOrderDispatchStr.map(item => {
                    let temp = that.userOption.find(x => x.account === item);
                    dispatchList.push(temp)
                });
                let watchList = [];
                that.workOrderWatchStr.map(item => {
                    let temp = that.userOption.find(x => x.account === item);
                    watchList.push(temp)
                });
                that.work.workOrderDispatchStr=JSON.stringify(dispatchList);
                that.work.workOrderWatchStr=JSON.stringify(watchList);
                that.work.orgStr=JSON.stringify(dutyList);
                doPostAsync('/office/workOrder/addWorkOrder',that.work,function (res) {
                    if(res.code==200){
                        that.watchDialog=false;
                        showAlert('添加成功',1)
                    }else{
                        showAlert('添加成功')
                    }
                })
            },
            statistic() {
                var param = {};
                param.dispatchName = that.searchForm.dispatchName
                param.startTime = that.searchForm.date[0]
                param.endTime = that.searchForm.date[1]
                $.get('/office/workOrder/statistic', param, function (res) {
                    if (res.code == 200) {
                        that.tableData = res.obj
                    }

                })
            },
            handleAdd() {
                that.watchDialog = true;
            },
            getOrgList() {
                $.post('/office/org/getOrgTreeLay').then(res => {
                    that.orgList = res;
                })
            },
            getUserList() {
                let url = '/office/hrEmployDetail/queryHrEmployDetailList?status=1&page=1&rows=500';
                $.post(url, function (e) {
                    that.userOption = e.obj.rows.map(item => {
                        return {name: item.name, info: `${item.name}(${item.orgName})`, account: item.account}
                    })
                })

            }
        },
        mounted: function () {
            that = this
            that.statistic();
            that.getOrgList();
            that.getUserList();
        },

    })
</script>
</body>
</html>
